/**
 * @param {Object} Model 模型 负责管理应用程序的数据和状态
 * @param {Object} View 视图 负责显示数据和状态
 * @param {Object} Controller 负责处理用户输入和管理应用程序的状态转换
 * @description 
 *	MVC（Model-View-Controller）是一种用于设计用户界面的模式。该模式将应用程序分为三个部分：模型、视图和控制器。模型负责管理应用程序的数据和状态，视图负责显示数据和状态，
 *  而控制器负责处理用户输入和管理应用程序的状态转换。
 */
class Model {
	constructor() {
		this.data = "Initial data";
	}

	setData(data) {
		this.data = data;
	}

	getData() {
		return this.data;
	}
}

class View {
	constructor() {
		this.model = null;
		this.element = null;
	}

	setModel(model) {
		this.model = model;
	}

	setElement(element) {
		this.element = element;
	}

	render() {
		let data = this.model.getData();
		this.element.innerHTML = data;
	}
}

class Controller {
	constructor() {
		this.model = null;
		this.view = null;
	}

	setModel(model) {
		this.model = model;
	}

	setView(view) {
		this.view = view;
	}

	setData(data) {
		this.model.setData(data);
	}

	updateView() {
		this.view.render();
	}
}

let model = new Model();
let view = new View();
let controller = new Controller();

view.setModel(model);
view.setElement(document.querySelector("#app"));

controller.setModel(model);
controller.setView(view);

controller.updateView();
// 输出：Initial data

controller.setData("New data");
controller.updateView();
// 输出：New data